<template>
  <div>
    <div class="ui  info attached message" v-if='$store.state.isDetail'>
      <p v-for="line in lines">{{line}}</p>
    </div>
    <template v-else>
      <p><input type="text" v-model.trim="line1" ></p>
      <p><input type="text" v-model.trim="line2" ></p>
      <p><input type="text" v-model.trim="line3" ></p>
      <!--<errmsg v-show="errors.has(field.name)">-->
        <!--{{ errors.first(field.name) }}-->
      <!--</errmsg>-->
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';

  import errmsg from 'components/valid/errmsg';
  const store = util.store

  export default {
    data() {
      return {
        val: '',
        line1: '',
        line2: '',
        line3: '',
      }
    },
    components: {errmsg},
    methods: {},
    watch: {
      lines: function (val, old) {
        if (val != old) {
          val = val.filter(item=> {
            return item
          });
          this.$emit('setVo', this.field.name, val.join('#|#'))
        }
      },
      hasError: function (val, old) {
        store.push(this, 'setVoError', 'voErrors', this.field.name, this.errors.first(this.field.name))
      }
    },
    computed: {
      placeholder() {
        return `请输入${this.field.title}`
      },
      hasError(){
        return this.errors.has(this.field.name)
      },
      lines(){
        return [this.line1, this.line2, this.line3];
      }
    },
    props: ['field'],
    created() {
      if(this.field.fval) {
        let [line1,line2,line3] = this.field.fval.split('#|#');
        this.line1=line1;
        this.line2=line2;
        this.line3=line3;
      }

    },
    mounted() {
    }
  };
</script>

<style scoped>
  .field {
  }
</style>
